<template>
    <div class="common-layout">
        <el-container>
            <el-header class="common-header">
                <p>以下为当前用户的个人信息!</p>
            </el-header>
            <el-container>
                <el-aside width="600px">
                    <div class="userHead">
                        <label for="userimg">
                            <el-link underline="never" class="link">

                                <el-image :src="imgSrc" class="userImg" @mouseenter="userImgHover"></el-image>
                                <div v-show="showChangeImg" class="userImg hoverShow" @mouseleave="uesrImgLeave">修改头像
                                </div>

                                <!-- <img :src="imgSrc" width="200px" class="userImg"> -->
                            </el-link>
                        </label>
                        <!-- <input type="file" id="userimg" @change="changeImg($event)" accept="image/*"> -->
                        <h2>{{ userDetailMessage.nickname }}</h2>
                        <p class="MySig">{{ userDetailMessage.bio }}</p>
                        <p class="MyFollowAndFans">关注:{{ userDetailMessage.followCount }} 粉丝:{{
                            userDetailMessage.fansCount }}</p>
                    </div>
                </el-aside>






                <el-main class="common-main">
                    <el-card style="max-width: 800px" shadow="hover">
                        <p class="tip">这里是你的昵称喵~ヾ(≧▽≦*)o↓</p>
                        <p class="p-content">昵称:{{ userDetailMessage.nickname }}<el-button type="primary" text
                                @click="changeNameVisable = true">编辑</el-button></p>
                        <p class="tip">这里是你的UID喵~ヾ(≧▽≦*)o↓</p>
                        <p class="p-content">UID:{{ userDetailMessage.id }}</p>
                        <p class="tip">这里是你的性别喵~ヾ(≧▽≦*)o↓</p>
                        <p class="p-content">性别:{{ genderShows[genderKey] }}<el-button type="primary"
                                text>编辑</el-button></p>
                        <p class="tip">这里是你的个性签名喵~ヾ(≧▽≦*)o↓</p>
                        <p class="p-content">签名:{{ userDetailMessage.bio }}<el-button type="primary" text>编辑</el-button>
                        </p>
                        <p class="tip">这里是你的手机号码喵~ヾ(≧▽≦*)o↓</p>
                        <p class="p-content">手机号码:{{ userDetailMessage.phoneNum }}<el-button type="primary"
                                text>编辑</el-button></p>
                        <p class="tip">这里是你的邮箱喵~ヾ(≧▽≦*)o↓</p>
                        <p class="p-content">邮箱:{{ userDetailMessage.email }}<el-button type="primary"
                                text>编辑</el-button></p>
                        <p class="tip">这里是你的创建时间喵~ヾ(≧▽≦*)o↓</p>
                        <p class="p-content">创建时间:{{ userDetailMessage.createTime }}</p>
                        <el-button type="primary" text style="text-align: center;" @click="changePwdVisable=true">如果你想要修改你的密码,请点击这里...
                        </el-button>
                    </el-card>
                    <el-dialog v-model="changeNameVisable" width="500">
                         <el-input v-model="newName" style=" height: 40px;width: 400px" placeholder="请输入你的新名字" />
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button @click="changeNameVisable = false">取消</el-button>
                                <el-button type="primary" @click="changeNickName">
                                    确认
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                        <el-dialog v-model="changePwdVisable" width="500">
                         <el-input v-model="newPwd" style=" height: 40px;width: 400px" placeholder="请输入你的新密码" />
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button @click="changePwdVisable = false">取消</el-button>
                                <el-button type="primary" @click="changePwd">
                                    确认
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>



                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import axios from 'axios'
import { Key } from '@element-plus/icons-vue';
import { fa } from 'element-plus/es/locale/index.mjs';
let changeNameVisable = ref(false)
let newName = ref('')
let changePwdVisable = ref(false)
let newPwd = ref('')
list()
interface userDetailMe {
    avatarUrl: string
    bio: string
    createTime: string
    email: string
    fansCount: number
    followCount: number
    gender: string
    id: number
    isAdmin: string
    nickname: string
    phoneNum: string
    recipeCount: number
    status: string
}
let userDetailMessage: userDetailMe = reactive({
    avatarUrl: '',
    bio: '',
    createTime: '',
    email: '',
    fansCount: 0,
    followCount: 0,
    gender: '',
    id: 0,
    isAdmin: '',
    nickname: '',
    phoneNum: '',
    recipeCount: 0,
    status: ''


})
function list(){
axios({
    url: '/api/user/getDetailUserInfo',
}).then(res => {
    Object.assign(userDetailMessage, res.data.data)
    console.log(userDetailMessage);
    if (res.data.gender === '0') {
        genderKey.value = 0
    } else if (res.data.gender === '1') {
        genderKey.value = 1
    } else genderKey.value = 2

})
}
function changeNickName(){
axios({
url:'/api/user/changeNickname',
method:'post',
params:{
    newNickname:newName.value
}
}).then(res=>{
    
    changeNameVisable.value = false
    list()
    console.log(newName.value)
    newName.value=''
})
}

function changePwd(){
axios({
url:'/api/user/changePassword',
method:'post',
params:{
    newPassword:newPwd.value
}
}).then(res=>{
    changePwdVisable.value = false
    newPwd.value=''
})




}


const genderShows = ['女', '男', '不愿透露']

let showChangeImg = ref(false)
function userImgHover() {
    showChangeImg.value = true
}
function uesrImgLeave() {
    showChangeImg.value = false
}
let imgSrc = ref('')

// console.log(userDetailMessage.id)
let genderKey = ref()
console.log(genderKey.value)

async function changeImg(e: any) {
    const fd = new FormData()
    // 往formData中添加参数
    fd.append('file', e.target.files[0])
    if (e.target.files[0] == undefined) {
        return
    }
    axios({
        url: '/api/image/upload',
        method: 'post',
        data: {
            file: e.target.files[0],
            type: 'cooking'
        },
        // 传输图片专属头
        headers: { 'Content-Type': 'multipart/form-data', }

    }).then(res => {
        console.log(res.data.data);

        imgSrc.value = 'http://' + res.data.data
    })
}





















</script>

<style scoped>
.common-layout {
    background-color: #ffffff;
}

.common-header {
    text-align: center;
    color: #999;
}

.userHead {
    text-align: center;
    padding: 20px 0;
    margin-top: 80px;
    /* border-bottom: 1px solid #f0f0f0; */
}

.link {
    position: relative;
}

.MySig {
    font-size: 1vw;
    color: #999;
}

.MyFollowAndFans {
    font-size: 0.8vw;
    color: #999;

}

.userImg {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 3px solid #FFE8CC;
    object-fit: cover;
    transition: all 0.3s ease;
}

.hoverShow {
    width: 195px;
    height: 195px;
    text-align: center;
    line-height: 195px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.1);
}

.userImg:hover {
    transform: scale(1.05);
}

h2 {
    font-size: 30px;

}

.tip {
    font-size: small;
    color: #999;

}

.p-content {
    text-align: center;

}
</style>